﻿
@{
    ViewData["Title"] = "菜单表单";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<form id="form" class="layui-form" style="margin-top: 25px">
    @Html.AntiForgeryToken()
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="hidden" name="Id" />
                <input type="text" name="MenuName" lay-verify="required" placeholder="请输菜单名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-inline">
                <input type="text" name="MenuUrl" placeholder="请输入链接" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">父级</label>
        <div class="layui-input-block">
            <select class="select2" lay-ignore name="SuperiorId" lay-verify="required" id="ParentId" style="width: 90%"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">窗口宽度</label>
            <div class="layui-input-inline">
                <input type="hidden" name="Id" />
                <input type="text" name="LayerWidth" lay-verify="required" placeholder="px或者%" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">窗口高度</label>
            <div class="layui-input-inline">
                <input type="text" name="LayerHeight" placeholder="px或者%" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="MenuType" lay-verify="required">
                    <option value=""></option>
                    <option value="0">模块</option>
                    <option value="1">菜单</option>
                    <option value="2">按钮</option>
                    <option value="3">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">事件</label>
            <div class="layui-input-inline">
                <input type="text" name="MenuEvent" placeholder="请输入事件" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-inline">
                <input type="text" name="MenuIcon" id="Icon" placeholder="请选择图标" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn layui-btn-primary" id="btnSetIcon" style="position: absolute; left: 244px;">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">层级</label>
            <div class="layui-input-inline">
                <select name="MenuHierarchy" lay-verify="required">
                    <option value=""></option>
                    <option value="1">第一层级显示</option>
                    <option value="2">第二层级显示</option>
                    <option value="3">第三层级显示</option>
                    <option value="0">其他</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">排序码</label>
            <div class="layui-input-inline">
                <input type="NumTber" name="MenuSort" lay-verify="required" placeholder="越小越靠前" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选项</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="MenuIsUse" lay-skin="switch" lay-text="启用|禁用" value="true" checked>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="display:none;">
        <div class="layui-input-block">
            <button id="btnSubmit" class="layui-btn" lay-submit lay-filter="add">提交</button>
        </div>
    </div>
</form>
<script src="~/lib/layui/Expand/LayuiExpand.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        $("#ParentId").bindSelect({
            url: "/Menu/GetModular"
        });

        var primaryKey = $.getQueryString("pk");
        if (primaryKey) {
            $.ajax({
                url: "/Menu/GetForm",
                data: { pk: primaryKey },
                type: "post",
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#form").formSerialize(data);
                }
            });
        }

        form.render();

        form.on('submit(add)', function (data) {
            $.formSubmit({
                url: "/Menu/Form",
                data: data.field
            });
            return false;
        });

        $("#btnSetIcon").click(function () {
            $.layerOpen({
                id: "icon",
                title: "设置图标",
                width: "800px",
                height: "580px",
                maxmin: true,
                content: "/Menu/Icon",
                yes: function (body, win, index) {
                    $('#Icon').val(win.className);
                    top.layer.close(index);
                }
            });
            return false;
        });
    });

</script>

